<template>
  <div class="wash">
    <div class="header">{{headerTtitle}}</div>
    <van-pull-refresh v-model="isLoading"
                      @refresh="onRefresh"
                      :disabled="disabled"
                      :head-height="headHeight">
      <common-scroll ref="scroll"
                     class="scroll"
                     @scrollend="handleScrollEnd"
                     @pullingUp="handlePullLoad"
                     :listenScroll="listenScroll"
                     :data="list">
        <div class="content">
          <component-loading v-show="!list.length > 0"></component-loading>
          <ul class="list">
            <li class="item"
                v-for="item of list"
                :key="item.id">
              <component-shop :shopInfo="item"
                              @show="handleShow"></component-shop>
            </li>
          </ul>
          <div class="loading"
               v-show="load">{{loading}}</div>
          <div class="finish"
               v-show="finish">{{nomore}}</div>
        </div>
      </common-scroll>
    </van-pull-refresh>
    <div class="shade"
         v-show="isShow"
         @click.stop="handleHide">
      <div class="iconfont guide">&#xe679;</div>
    </div>
    <component-tab></component-tab>
  </div>
</template>

<script>
import ComponentTab from 'common/tabBar'
import CommonScroll from 'common/scroll'
import ComponentShop from 'common/shop'
import commonWx from '@/assets/js/wx'
import ComponentLoading from 'common/loading'
import {
  Toast
} from 'vant'
export default {
  name: 'Wash',
  components: {
    ComponentTab,
    CommonScroll,
    ComponentShop,
    ComponentLoading
  },
  data () {
    return {
      isShow: false,
      headerTtitle: '洗车', // 标题
      list: [], // 数据
      page: 1, // 页码
      total: 0, // 数据总数
      isLoading: false, // 是否刷新中
      disabled: false, // 是否下拉刷新
      scrollHeight: 0, // 滚动高度
      headHeight: 100, // 下拉刷新高度
      load: false, // 上拉加载
      loading: '加载中...', // 加载中
      nomore: '没有更多',
      finish: false, // 加载完成
      lat: 0, // 纬度
      lng: 0 // 经度
    }
  },
  methods: {
    // 下拉刷新
    onRefresh () {
      const msg = '刷新成功'
      this.page = 1
      this.list = []
      this.getWashInfo(this.lat, this.lng)
      setTimeout(() => {
        Toast({
          message: msg,
          duration: 1000,
          forbidClick: true
        })
      }, 500)
    },
    // 获取数据
    getWashInfo (lat, lng) {
      this.lat = lat
      this.lng = lng
      const page = this.page
      this.$api.wash.getWashInfo({ page, lat: this.lat, lng: this.lng })
        .then(this.getWashInfoSucc)
    },
    getWashInfoSucc (res) {
      const CODE_OK = this.$api.CODE_OK
      const LOGIN_CODE = this.$api.LOGIN_CODE
      res = res.data
      if (res.code === CODE_OK && res.data) {
        const data = res.data
        this.list = this.list.concat(data.seller)
        this.total = data.total
        this.load = false
        this.isLoading = false
      } else if (res.code === LOGIN_CODE) {
        this.$reLogin()
      }
    },
    handleScrollEnd (pos) {
      this.scrollHeight = -pos.y
    },
    handlePullLoad () {
      const finish = this.finish
      if (!finish) {
        this.page++
        this.load = true
        setTimeout(() => {
          this.getWashInfo(this.lat, this.lng)
        }, 200)
      }
      this.$refs.scroll.finishPullUp()
      this.$refs.scroll.refresh()
    },
    _initLocation () {
      commonWx.getLocation(this.getWashInfo)
    },
    handleShow (flag) {
      this.isShow = flag
    },
    handleHide () {
      this.isShow = false
    }
  },
  created () {
    this.listenScroll = true
    this._initLocation()
  },
  watch: {
    scrollHeight (newY) {
      this.disabled = newY > 0
    },
    list () {
      const total = this.total
      const list = this.list.length
      this.finish = !(total > list)
    }
  }
}

</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wash >>> .van-pull-refresh__track
  width 100%
  height 100vh

.wash
  touch-action none
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  overflow hidden

.header
  position absolute
  top 0
  left 0
  z-index 2
  width 100%
  height 88px
  box-shadow 0px 5px 12px 0px rgba(5, 5, 5, 0.12)
  background-color $common_bgc
  font-size $back_fz
  line-height 88px
  text-align center
  font-weight bold

.list
  min-height 500px
  width 100%

  .item
    margin-bottom 37px

.scroll
  top 88px
  box-sizing border-box
  bottom 110px

.loading, .finish
  width 100%
  line-height 42px
  font-size $common_fz
  color $location
  text-align center

.shade
  position fixed
  z-index 30
  top 0
  left 0
  bottom 0
  right 0
  background rgba(0, 0, 0, 0.4)

.guide
  position absolute
  right 20px
  top 0
  font-size 80px
  color #fff
</style>
